<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			.head{
				background: #3366CC;
				box-shadow: none;
			}
			.head a{
				color: white;
			}
			.head h1{
				color:white;
			}
			.okxujie{
				position: relative;
				top: -10px;
				height: 510px;
				background: white;
			}
			.okxujie h4{
				padding-top:15px;
				margin-left: 10px;
			}
			#xujieimg{
				background: white;
			}
			.noxujie{
				height: 510px;
				background: white;
			}
			.noxujie h4{
				padding-top: 10px;
				margin-left: 10px;
			}
			#nojieimg{
				background: #FFFFFF;
			}
		</style>
	</head>

	<body>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<header class="mui-bar mui-bar-nav head">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">续借管理</h1>
		</header>
		<div class="mui-content">
		    <div class="okxujie">
			<h4>续借书籍</h4>
			<ul class="mui-table-view mui-grid-view mui-grid-9" id="xujieimg">
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#">
			        <img src="http://placehold.it/150x150">
			        <div class="mui-media-body">延长15天</div>
			    </a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#">
			         <img src="http://placehold.it/150x150">
			        <div class="mui-media-body">延长15天</div>
			    </a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#">
			        <img src="http://placehold.it/150x150">
			        <div class="mui-media-body">延长15天</div>
			    </a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#">
			        <img src="http://placehold.it/150x150">
			        <div class="mui-media-body">延长15天</div>
			    </a>
			</li>
			<a href="#" class="mui-pull-right" style="margin-top: 5px;margin-right: 5px;"><p>更多 > </p></a>
			   </ul>
			
		</div>
		
		<div class="noxujie">
			<h4>无法续借书籍</h4>
			<ul class="mui-table-view mui-grid-view mui-grid-9" id="nojieimg">
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#">
			        <img src="http://placehold.it/150x150">
			        <div class="mui-media-body">超时借阅</div>
			    </a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#">
			         <img src="http://placehold.it/150x150">
			        <div class="mui-media-body">超时借阅</div>
			    </a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#">
			        <img src="http://placehold.it/150x150">
			        <div class="mui-media-body">超时借阅</div>
			    </a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#">
			        <img src="http://placehold.it/150x150">
			        <div class="mui-media-body">超时借阅</div>
			    </a>
			</li>
			<a href="#" class="mui-pull-right" style="margin-top: 5px;margin-right: 5px;"><p>更多 > </p></a>
			   </ul>
			
		</div>
		</div>
	</body>

</html>